<template>
<section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
            <el-form-item>
                <el-input v-model="filters.medicineName" placeholder="药品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="filters.medicineTypeId" placeholder="请选择类别">
                    <el-option v-for="item in medicineTypeList" :key="item.medicineTypeId" :label="item.medicineTypeName" :value="item.medicineTypeId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="queryMedicineByPage">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleAdd">新增</el-button>
            </el-form-item>
        </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="medicines" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="medicineName" label="药品名称" sortable>
            <template slot-scope="scope"><span :style="scope.row.amount <=  scope.row.warningAmount ? 'color: red;font-weight: bold;' : ''">{{scope.row.medicineName}}</span></template>
        </el-table-column>
        <el-table-column prop="price" label="药品价格" sortable>
            <template slot-scope="scope"><span :style="scope.row.amount <=  scope.row.warningAmount ? 'color: red;font-weight: bold;' : ''">{{scope.row.price}}</span></template>
        </el-table-column>
        <el-table-column prop="amount" label="药品库存" sortable>
            <template slot-scope="scope"><span :style="scope.row.amount <=  scope.row.warningAmount ? 'color: red;font-weight: bold;' : ''">{{scope.row.amount}}</span></template>
        </el-table-column>
        <el-table-column prop="medicineStatus" label="药品状态" :formatter="formatStatus" sortable>
            <template slot-scope="scope"><span :style="scope.row.amount <=  scope.row.warningAmount ? 'color: red;font-weight: bold;' : ''">{{scope.row.medicineStatus == 1 ? "上架" : "下架"}}</span></template>
        </el-table-column>
        <el-table-column prop="medicineTypeName" label="药品类别" sortable>
            <template slot-scope="scope"><span :style="scope.row.amount <=  scope.row.warningAmount ? 'color: red;font-weight: bold;' : ''">{{scope.row.medicineTypeName}}</span></template>
        </el-table-column>
        <el-table-column prop="warningAmount" label="警戒数值" sortable>
            <template slot-scope="scope"><span :style="scope.row.amount <=  scope.row.warningAmount ? 'color: red;font-weight: bold;' : ''">{{scope.row.warningAmount}}</span></template>
        </el-table-column>
        <el-table-column prop="remark" label="药品说明" :formatter="formatterRemark" sortable>
            <template slot-scope="scope"><span :style="scope.row.amount <=  scope.row.warningAmount ? 'color: red;font-weight: bold;' : ''">{{scope.row.remark.length > 10 ? scope.row.remark.substring(0, 10) + "..." : scope.row.remark}}</span></template>
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="size" :total="total" style="float:right;"></el-pagination>
    </el-col>

    <!--编辑界面-->
    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-form-item label="药品名称" prop="medicineName">
                <el-input v-model="editForm.medicineName"></el-input>
            </el-form-item>
            <el-form-item label="药品价格" prop="price">
                <el-input v-model="editForm.price"></el-input>
            </el-form-item>
            <el-form-item label="药品数量" prop="amount">
                <el-input v-model="editForm.amount"></el-input>
            </el-form-item>
            <el-form-item label="药品类别" prop="amount">
                <el-autocomplete v-model="editForm.medicineTypeName" style="width:100%;" :fetch-suggestions="queryMedicineType" @select="handleSelect"></el-autocomplete>
            </el-form-item>
            <el-form-item label="药品状态" prop="medicineStauts">
                <el-select v-model="editForm.medicineStatus" placeholder="请选择">
                    <el-option v-for="item in medicineStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="警戒数量" prop="warningAmount">
                <el-input v-model="editForm.warningAmount"></el-input>
            </el-form-item>
            <el-form-item label="药品说明" prop="remark">
                <el-input v-model="editForm.remark" type="textarea" :rows="10"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
</section>
</template>

<script>
import {
    mapGetters
} from "vuex";
import * as api from "@/api/api.js";
import {
    parse
} from "path";

export default {
    data() {
        return {
            defaultProps: {
                children: "children",
                label: "nodeName"
            },
            filters: {
                medicineName: "",
                medicineTypeId: ""
            },
            showUrl: api.showUrl,
            uploadFileUrl: api.uploadFileUrl,
            medicineTypeList: [],
            medicines: [],
            total: 0,
            current: 1,
            size: 10,
            listLoading: false,
            sels: [], //列表选中列
            editFormVisible: false, //编辑界面是否显示
            editLoading: false,
            editFormRules: {},
            //编辑界面数据
            editForm: {},
            medicineStatusList: [
                { value: "0", label: "下架" },
                { value: "1", label: "上架" }
            ],
            medicineTypeList: []
        };
    },
    computed: {
        ...mapGetters("user", ["getUser"])
    },
    methods: {
        formatterRemark(row, column) {
            return row.remark.length > 10 ? row.remark.substring(0, 10) + "..." : row.remark;
        },
        formatStatus(row, column) {
            return row.medicineStatus == 1 ? "上架" : "下架"
        },
        handleCurrentChange(val) {
            this.current = val;
            this.queryMedicineByPage();
        },
        //获取列表
        queryMedicineByPage() {
            let para = {
                current: this.current, //当前页
                size: this.size,  //一页多少条数据
                medicineName: this.filters.medicineName, //搜索栏里的
                medicineTypeId: this.filters.medicineTypeId //搜索栏里的
            };
            this.listLoading = true;
            api.queryMedicineByPage(para)
                .then(res => {
                    this.total = res.returnPage.total;
                    this.medicines = res.returnPage.records;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        //删除
        handleDel: function (index, row) {
            this.$confirm("确认删除该记录吗?", "提示", {
                    type: "warning"
                })
                .then(() => {
                    this.listLoading = true;
                    let para = {
                        medicineId: row.medicineId
                    };
                    api.delMedicine(para).then(res => {
                        this.listLoading = false;
                        if (res.message == 'success') {
                            this.$message({
                                message: "删除成功",
                                type: "success"
                            });
                        }
                        this.queryMedicineByPage();
                    });
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        //显示编辑界面
        handleEdit: function (index, row) {
            this.editFormVisible = true;
            this.editForm = Object.assign({}, row);
        },
        //显示新增界面
        handleAdd: function () {
            this.editFormVisible = true;
            this.editForm = {};
        },
        //编辑
        editSubmit: function () {
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        this.editLoading = true;
                        let para = Object.assign({}, this.editForm);
                        para.creatorId = this.getUser.userId;

                        api.updateMedicine(para)
                            .then(res => {
                                this.editLoading = false;
                                if (res.message == 'success') {
                                    this.$message({
                                        message: "提交成功",
                                        type: "success"
                                    });
                                    this.$refs["editForm"].resetFields(); //清空
                                    this.editFormVisible = false;//关闭
                                    this.queryMedicineByPage();//在查询
                                }
                            })
                            .catch(() => {
                                this.listLoading = false;
                            });
                    });
                }
            });
        },
        handleCheckChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        //获取列表
        queryMedicineType(queryString, callback) {
            let para = {
                medicineTypeName: queryString
            };
            api.queryMedicineType(para)
                .then(res => {
                    let list = res.returnList.map(item => {
                        item.value = item.medicineTypeName
                        return item;
                    });
                    callback(list);
                }).catch(() => {});
        },
        handleSelect(item, index) {
            this.editForm.medicineTypeId = item.medicineTypeId;
            this.editForm.medicineTypeName = item.medicineTypeName;
        },
        queryMedicineTypeList() {
            api.queryMedicineType({})
                .then(res => {
                    this.medicineTypeList = res.returnList;
                }).catch(() => {});
        },
    },
    mounted() {
        this.queryMedicineTypeList();
        this.queryMedicineByPage();
    }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.file {
    position: relative;
    display: inline-block;
    background: #63E0EC;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #FFFFFF;
    text-decoration: none;
    text-indent: 0;
    line-height: 30px;
    height: 30px;
}

.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}

.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
</style>
